<template>
	<view class="page content-20">
		<view class="doctor-info item-box">
			<image class="item-img avatar" :src="info.doctorAvatar" mode=""></image>
			
			<view class="meet-item">
				<view class="meet-status">
					<view class="meet-title">{{info.doctorName}}<text class="small">({{info.postTitle}})</text></view>
					<!-- <view class="status red">预约失败</view> -->
				</view>
				<view class="meet-info">
					{{info.briefIntroduction || ''}}
				</view>
			</view>
		</view>
		
		<view class="detail-section">
			<view class="section-line">
				<view class="section-title">预约爱宠：</view>
				<view class="section-con">{{info.nickName}}</view>
			</view>
			<view class="section-line">
				<view class="section-title">预约时间：</view>
				<view class="section-con theme">{{info.makeDate | formatTime}} {{info.timeSlot}}</view>
			</view>
		</view>
		<view class="detail-section">
			<view class="section-line">
				<view class="section-title">联系人：</view>
				<view class="section-con">{{info.userNickName}}</view>
			</view>
			<view class="section-line">
				<view class="section-title">联系电话：</view>
				<view class="section-con">{{info.phoneNumber}}</view>
			</view>
		</view>
		<!-- <view class="detail-section">
			<view class="section-line">
				<view class="section-title">相关备注</view>
				<view class="section-con">黑旋风(杜宾犬)</view>
			</view>
			<view class="section-line">
				<view class="section-title">失败原因</view>
				<view class="section-con">美容预约</view>
			</view>
		</view> -->
		
		<view class="success-btns">
			<view class="btn" @click="$makePhoneCall()">联系医生</view>
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				info: {}
			}
		},
		
		onLoad(options) {
			this.info = JSON.parse(options.info)
			console.log(this.info);
		}
		
	}
</script>

<style scoped lang="scss">
	.item-box{
		border-bottom: 1px solid $border-color;
		padding-bottom: 30upx;
	}
	.meet-item{
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 0;
		margin-left: 20upx;
	}
	
	.meet-status{
		@include flex-base;
		justify-content: space-between;
	}
	.meet-title{
		font-size: $font-size-30;
		font-weight: bold;
	}
	.status{
		font-size: $font-size-28;
	}
	.meet-info{
		margin-top: 20upx;
		@include flex-base;
		justify-content: space-between;
		
	}
	.info{
		display: flex;
		flex-direction: column;
	}
	
	.desc{
		background-image: url(../static/icon_10.png);
		background-size: 20upx 20upx;
		background-repeat: no-repeat;
		background-position: left center;
		padding-left: 35upx;
	}
	.detail-section{
		padding: 30upx 0;
		border-bottom: 1px solid $border-color;
	}
	.section-line{
		@include flex-base;
		height: 30upx;
		margin-bottom: 30upx;
	}
	.section-line:last-child{
		margin-bottom: 0;
	}
	.section-title{
		width: 170upx;
		color: #666666;
		font-size: $font-size-28;
	}
	.success-btns{
		justify-content: center;
	}
	.small{
		font-size: $font-size-26;
		color: #333;
	}
</style>
